微前端的優化-模組載入

微前端因為大量拆分，各團隊都有自己的個性，導致高昂的載入成本，勢必要有良好的優化策略。

執行策略

渲染切分

以渲染功能切分，避免一載入初始畫面就要去切分功能。所以可以針對非同步渲染的畫面或邏輯找尋切分點，最常見的是頁面、外掛、遊戲等等切分點，相對功能獨立不耦合都很適合開出微前端進行維護。

功能切分

以功能切分，推薦拆分 Package，由分包管理非常低耦合的功能，這樣可以透過 MF 進行共用，提高被使用的效率。把必要的 Library 功能經過 Tree Shaking 做綑綁，讓真正需要共用的功能做共享，不需要的即時功能被分包，有計劃有效率的拆分。但同時要小心不要切分過細到 Function 層級，組裝模組本身也是一種成本，要有意識的去管理。

函式庫切分

以函式庫切分時，如果不清楚底層包的依賴系，就不能得到很良好的共用效率，所以在想要在微前端做優化就必需針對使用的 library 進行全盤評估，底層的依賴與版本有很慎重的管理與控制，才能有效瘦身。

遠端模組

遠端模組有很多不同的模組形式，可以是應用啟動型程式、插件程式、UI 元件，每一種模組輸出都可以某種程度的去拆分功能。但並不建議太散亂的採用 function 的方式，或是有複雜參數的 Component，這些都會增加模組使用上的學習成本。

啟動型程式

通常是介接原生 API 功能，進行擴展，比如擴展 prototype、註冊事件、行為攔截...等等。

插件程式

通常是基於某個套件延展的插件系統，載入後通常要從另一個模組取得框架實體，對實體進行插入。

UI 元件

通常可以是框架使用的 Component，但耦合性通常也比較高。非常推薦再次用 WebComponent 進行二次封裝，可以很有效的去使用和執行。